import React, { Component, Fragment } from "react";
import {
    NavBar,
    Icon,
    WhiteSpace,
    Button,
    ActivityIndicator,
    SegmentedControl,
    WingBlank,
} from "antd-mobile";
import Banner from "../../components/banner";
import { getGoodsDetail } from "../../api";

import "./index.scss";
import { dateTime } from "../../utils/time";
import { ShoppingCartOutlined } from "@ant-design/icons";

export default class Detail extends Component {
    state = {
        data: null,
        detailBanner: null,
        bannerImg: null,
        onOff: false,
        display1: "block",
        display2: "none",
    };

    async componentDidMount() {
        let id = this.props.match.params.id;
        console.log(id);
        let res = await getGoodsDetail(id);

        this.setState({
            data: res.data.message,
            detailBanner: res.data.message.goods_introduce,
            bannerImg: res.data.message.pics,
        });
    }

    componentDidUpdate() {}

    render() {
        let { history } = this.props;
        let { data, detailBanner, bannerImg, display1, display2 } = this.state;

        let bannerImgArr = [];
        bannerImg &&
            bannerImg.map((v) => {
                return bannerImgArr.push({ image_src: v.pics_mid });
            });

        return (
            <div className="detail">
                {detailBanner ? (
                    <Fragment>
                        <NavBar
                            mode="dark"
                            icon={<Icon type="left" size="lg" />}
                            onLeftClick={() => history.goBack()}
                            style={{
                                position: "fixed",
                                top: 0,
                                width: "100%",
                                zIndex: 9999,
                            }}
                        >
                            商品详情
                        </NavBar>

                        <Banner
                            imgHeight={375}
                            data={bannerImgArr}
                            style={{ marginTop: 45 }}
                        />

                        <WhiteSpace size="lg" />
                        <div className="detail-middle">
                            <div className="detail-title">
                                {data.goods_name}
                            </div>
                            <div className="detail-price">
                                <span>￥</span>
                                {data.goods_price}
                            </div>
                        </div>
                        <div className="detail-info">
                            <div className="detail-info-list">
                                <span>上架时间</span>
                                {dateTime(data.add_time)}
                            </div>
                            <div className="detail-info-list">
                                <span>库存</span>
                                {data.goods_number}
                            </div>
                            <div className="detail-info-list">
                                <span>促销</span>
                                {data.is_promote ? "是" : "否"}
                            </div>
                            <div className="detail-info-list">
                                <span>运费</span>
                                免运费
                            </div>
                        </div>
                        <WhiteSpace size="lg" />
                        <WingBlank size="md">
                            <SegmentedControl
                                values={["图文详情", "规格参数"]}
                                onValueChange={(v) => {
                                    v === "图文详情"
                                        ? this.setState({
                                              display1: "block",
                                              display2: "none",
                                          })
                                        : this.setState({
                                              display1: "none",
                                              display2: "block",
                                          });
                                }}
                            />
                        </WingBlank>
                        <WhiteSpace size="lg" />
                        {/* 图文详情 */}
                        <div
                            style={{ display: display1 }}
                            dangerouslySetInnerHTML={{ __html: detailBanner }}
                        ></div>
                        {/* 规格参数 */}
                        <div style={{ display: display2 }}>
                            {data.attrs.map((v) => (
                                <div key={v.attr_id} className="good-param">
                                    <div>{v.attr_name.split("-")[0]}</div>
                                    <div>
                                        <span>{v.attr_name.split("-")[1]}</span>
                                        <span>{v.attr_vals}</span>
                                    </div>
                                </div>
                            ))}
                        </div>
                        <WhiteSpace size="lg" />
                        <WhiteSpace size="lg" />
                        <WhiteSpace size="lg" />
                        <WhiteSpace size="lg" />
                        <WhiteSpace size="lg" />
                        <div className="detail-footer">
                            <div className="footer-left">
                                <ShoppingCartOutlined width="20" height="20" />
                            </div>
                            <div className="footer-center">加入购物车</div>
                            <div className="footer-right">立即购买</div>
                        </div>
                    </Fragment>
                ) : (
                    <ActivityIndicator animating />
                )}
            </div>
        );
    }
}
